<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Electron-01  electron概念、搭建⼀个⼯程 | Wing's Note</title>
    <meta name="description" content="前端">
    <meta name="generator" content="VitePress v1.6.1">
    <link rel="preload stylesheet" href="/assets/style.CZ3yOroj.css" as="style">
    <link rel="preload stylesheet" href="/vp-icons.css" as="style">
    
    <script type="module" src="/assets/app.QwkrRvid.js"></script>
    <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/assets/chunks/theme.CiJOnvYt.js">
    <link rel="modulepreload" href="/assets/chunks/framework.CAfG9jOB.js">
    <link rel="modulepreload" href="/assets/src_前端_Electron_Electron-01 electron概念、搭建⼀个⼯程.md.B2_jOGn7.lean.js">
    <link rel="icon" href="/favicon.ico">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-59b6aa09><!--[--><!--]--><!--[--><span tabindex="-1" data-v-e822a5b1></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-e822a5b1>Skip to content</a><!--]--><!----><header class="VPNav" data-v-59b6aa09 data-v-e1424a3f><div class="VPNavBar" data-v-e1424a3f data-v-1a90bd4c><div class="wrapper" data-v-1a90bd4c><div class="container" data-v-1a90bd4c><div class="title" data-v-1a90bd4c><div class="VPNavBarTitle has-sidebar" data-v-1a90bd4c data-v-8fc6d704><a class="title" href="/" data-v-8fc6d704><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.png" alt data-v-40f4ff36><!--]--><span data-v-8fc6d704>Wing&#39;s Note</span><!--[--><!--]--></a></div></div><div class="content" data-v-1a90bd4c><div class="content-body" data-v-1a90bd4c><!--[--><!--]--><div class="VPNavBarSearch search" data-v-1a90bd4c><!--[--><!----><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-1a90bd4c data-v-07b13de5><span id="main-nav-aria-label" class="visually-hidden" data-v-07b13de5> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/src/前端/Vue/" tabindex="0" data-v-07b13de5 data-v-9b82e68b><!--[--><span data-v-9b82e68b>Vue</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/src/前端/Typescript/" tabindex="0" data-v-07b13de5 data-v-9b82e68b><!--[--><span data-v-9b82e68b>Typescript</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/src/前端/Javascript/" tabindex="0" data-v-07b13de5 data-v-9b82e68b><!--[--><span data-v-9b82e68b>Javascript</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/src/前端/html5/" tabindex="0" data-v-07b13de5 data-v-9b82e68b><!--[--><span data-v-9b82e68b>html5</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup active" data-v-07b13de5 data-v-7470aee4><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-7470aee4><span class="text" data-v-7470aee4><!----><span data-v-7470aee4>前端</span><span class="vpi-chevron-down text-icon" data-v-7470aee4></span></span></button><div class="menu" data-v-7470aee4><div class="VPMenu" data-v-7470aee4 data-v-54402249><div class="items" data-v-54402249><!--[--><!--[--><div class="VPMenuLink" data-v-54402249 data-v-a5b6c2ee><a class="VPLink link active" href="/src/前端/Electron/" data-v-a5b6c2ee><!--[--><span data-v-a5b6c2ee>Electron</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-54402249 data-v-a5b6c2ee><a class="VPLink link" href="/src/前端/Javascript/" data-v-a5b6c2ee><!--[--><span data-v-a5b6c2ee>Javascript</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-54402249 data-v-a5b6c2ee><a class="VPLink link" href="/src/前端/Nextjs/" data-v-a5b6c2ee><!--[--><span data-v-a5b6c2ee>Nextjs</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-54402249 data-v-a5b6c2ee><a class="VPLink link" href="/src/前端/React/" data-v-a5b6c2ee><!--[--><span data-v-a5b6c2ee>React</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-54402249 data-v-a5b6c2ee><a class="VPLink link" href="/src/前端/Server/" data-v-a5b6c2ee><!--[--><span data-v-a5b6c2ee>Server</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-54402249 data-v-a5b6c2ee><a class="VPLink link" href="/src/前端/Typescript/" data-v-a5b6c2ee><!--[--><span data-v-a5b6c2ee>Typescript</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-54402249 data-v-a5b6c2ee><a class="VPLink link" href="/src/前端/Vue/" data-v-a5b6c2ee><!--[--><span data-v-a5b6c2ee>Vue</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-54402249 data-v-a5b6c2ee><a class="VPLink link" href="/src/前端/Webpack/" data-v-a5b6c2ee><!--[--><span data-v-a5b6c2ee>Webpack</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-54402249 data-v-a5b6c2ee><a class="VPLink link" href="/src/前端/es6/" data-v-a5b6c2ee><!--[--><span data-v-a5b6c2ee>es6</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-54402249 data-v-a5b6c2ee><a class="VPLink link" href="/src/前端/html5/" data-v-a5b6c2ee><!--[--><span data-v-a5b6c2ee>html5</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-54402249 data-v-a5b6c2ee><a class="VPLink link" href="/src/%E5%89%8D%E7%AB%AF/index.html" data-v-a5b6c2ee><!--[--><span data-v-a5b6c2ee>index</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-54402249 data-v-a5b6c2ee><a class="VPLink link" href="/src/前端/jQuery/" data-v-a5b6c2ee><!--[--><span data-v-a5b6c2ee>jQuery</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-54402249 data-v-a5b6c2ee><a class="VPLink link" href="/src/前端/mini-programe/" data-v-a5b6c2ee><!--[--><span data-v-a5b6c2ee>mini-programe</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-54402249 data-v-a5b6c2ee><a class="VPLink link" href="/src/前端/node/" data-v-a5b6c2ee><!--[--><span data-v-a5b6c2ee>node</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-54402249 data-v-a5b6c2ee><a class="VPLink link" href="/src/前端/other-note/" data-v-a5b6c2ee><!--[--><span data-v-a5b6c2ee>other-note</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-54402249 data-v-a5b6c2ee><a class="VPLink link" href="/src/前端/react-native/" data-v-a5b6c2ee><!--[--><span data-v-a5b6c2ee>react-native</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-1a90bd4c data-v-f0ccd3bb><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-f0ccd3bb data-v-6485e66b data-v-5742d831><span class="check" data-v-5742d831><span class="icon" data-v-5742d831><!--[--><span class="vpi-sun sun" data-v-6485e66b></span><span class="vpi-moon moon" data-v-6485e66b></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-1a90bd4c data-v-3b261a8f data-v-fe1cd911><!--[--><a class="VPSocialLink no-icon" href="https://gitee.com/lwj-wing" aria-label="github" target="_blank" rel="noopener" data-v-fe1cd911 data-v-cf86f55c><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-1a90bd4c data-v-9782c2c2 data-v-7470aee4><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-7470aee4><span class="vpi-more-horizontal icon" data-v-7470aee4></span></button><div class="menu" data-v-7470aee4><div class="VPMenu" data-v-7470aee4 data-v-54402249><!----><!--[--><!--[--><!----><div class="group" data-v-9782c2c2><div class="item appearance" data-v-9782c2c2><p class="label" data-v-9782c2c2>Appearance</p><div class="appearance-action" data-v-9782c2c2><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-9782c2c2 data-v-6485e66b data-v-5742d831><span class="check" data-v-5742d831><span class="icon" data-v-5742d831><!--[--><span class="vpi-sun sun" data-v-6485e66b></span><span class="vpi-moon moon" data-v-6485e66b></span><!--]--></span></span></button></div></div></div><div class="group" data-v-9782c2c2><div class="item social-links" data-v-9782c2c2><div class="VPSocialLinks social-links-list" data-v-9782c2c2 data-v-fe1cd911><!--[--><a class="VPSocialLink no-icon" href="https://gitee.com/lwj-wing" aria-label="github" target="_blank" rel="noopener" data-v-fe1cd911 data-v-cf86f55c><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-1a90bd4c data-v-6b7178ab><span class="container" data-v-6b7178ab><span class="top" data-v-6b7178ab></span><span class="middle" data-v-6b7178ab></span><span class="bottom" data-v-6b7178ab></span></span></button></div></div></div></div><div class="divider" data-v-1a90bd4c><div class="divider-line" data-v-1a90bd4c></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-59b6aa09 data-v-0f0712aa><div class="container" data-v-0f0712aa><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-0f0712aa><span class="vpi-align-left menu-icon" data-v-0f0712aa></span><span class="menu-text" data-v-0f0712aa>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-0f0712aa data-v-efa4bc9c><button data-v-efa4bc9c>回到顶部</button><!----></div></div></div><aside class="VPSidebar" data-v-59b6aa09 data-v-49277fb6><div class="curtain" data-v-49277fb6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-49277fb6><span class="visually-hidden" id="sidebar-aria-label" data-v-49277fb6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-401c7c95><section class="VPSidebarItem level-0 has-active" data-v-401c7c95 data-v-a16ab31a><!----><div class="items" data-v-a16ab31a><!--[--><div class="VPSidebarItem level-1 is-link" data-v-a16ab31a data-v-a16ab31a><div class="item" data-v-a16ab31a><div class="indicator" data-v-a16ab31a></div><a class="VPLink link link" href="/src/%E5%89%8D%E7%AB%AF/Electron/Electron-01%20electron%E6%A6%82%E5%BF%B5%E3%80%81%E6%90%AD%E5%BB%BA%E2%BC%80%E4%B8%AA%E2%BC%AF%E7%A8%8B.html" data-v-a16ab31a><!--[--><p class="text" data-v-a16ab31a>Electron-01 electron概念、搭建⼀个⼯程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a16ab31a data-v-a16ab31a><div class="item" data-v-a16ab31a><div class="indicator" data-v-a16ab31a></div><a class="VPLink link link" href="/src/%E5%89%8D%E7%AB%AF/Electron/Electron-02%20%E8%BF%9B%E7%A8%8B%E9%80%9A%E8%AE%AF.html" data-v-a16ab31a><!--[--><p class="text" data-v-a16ab31a>Electron-02 进程通讯</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-59b6aa09 data-v-8e5081de><div class="VPDoc has-sidebar has-aside" data-v-8e5081de data-v-508e019d><!--[--><!--]--><div class="container" data-v-508e019d><div class="aside" data-v-508e019d><div class="aside-curtain" data-v-508e019d></div><div class="aside-container" data-v-508e019d><div class="aside-content" data-v-508e019d><div class="VPDocAside" data-v-508e019d data-v-00484315><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-00484315 data-v-aa4fe961><div class="content" data-v-aa4fe961><div class="outline-marker" data-v-aa4fe961></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-aa4fe961>页面导航</div><ul class="VPDocOutlineItem root" data-v-aa4fe961 data-v-1333dcf2><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-00484315></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-508e019d><div class="content-container" data-v-508e019d><!--[--><!--]--><main class="main" data-v-508e019d><div style="position:relative;" class="vp-doc _src_%E5%89%8D%E7%AB%AF_Electron_Electron-01%20electron%E6%A6%82%E5%BF%B5%E3%80%81%E6%90%AD%E5%BB%BA%E2%BC%80%E4%B8%AA%E2%BC%AF%E7%A8%8B" data-v-508e019d><div><h1 id="electron-01-electron概念、搭建一个工程" tabindex="-1">Electron-01 electron概念、搭建⼀个⼯程 <a class="header-anchor" href="#electron-01-electron概念、搭建一个工程" aria-label="Permalink to &quot;Electron-01  electron概念、搭建⼀个⼯程&quot;">​</a></h1><h2 id="electron概念" tabindex="-1">Electron概念 <a class="header-anchor" href="#electron概念" aria-label="Permalink to &quot;Electron概念&quot;">​</a></h2><p>Electron 是⼀个跨平台桌⾯应⽤开发框架，开发者可以使⽤：HTML、CSS、JavaScript 等 Web 技术来构建桌⾯应⽤程序，它的本质是结合了 Chromium 和 Node.js，现在⼴泛⽤于桌⾯应 ⽤程序开发。</p><h3 id="优势" tabindex="-1">优势 <a class="header-anchor" href="#优势" aria-label="Permalink to &quot;优势&quot;">​</a></h3><ol><li>可跨平台：同⼀套代码可以构建出能在：Windows、macOS、Linux 上运⾏的应⽤程序。</li><li>上⼿容易：使⽤ Web 技术就可以轻松完成开发桌⾯应⽤程序。</li><li>底层权限：允许应⽤程序访问⽂件系统、操作系统等底层功能，从⽽实现复杂的系统交互。</li><li>社区⽀持：拥有⼀个庞⼤且活跃的社区，开发者可以轻松找到⽂档、教程和开源库。</li></ol><h3 id="架构组成" tabindex="-1">架构组成 <a class="header-anchor" href="#架构组成" aria-label="Permalink to &quot;架构组成&quot;">​</a></h3><p><img src="/assets/makeUp.CRmfrZ1V.png" alt="架构组成"></p><p>Electron可以分为Chromium、Node.js、Native apis三大核心模块 Chromium： 支持最新特性的浏览器 Node.js： javascript运行时，可实现文件读写等 Native apis： 提供统一的原生界面能力，与操作系统通讯、获取设备硬件的信息、快捷键等</p><h3 id="进程模型" tabindex="-1">进程模型 <a class="header-anchor" href="#进程模型" aria-label="Permalink to &quot;进程模型&quot;">​</a></h3><p><img src="/assets/%E8%BF%9B%E7%A8%8B%E6%A8%A1%E5%9E%8B.mldy4feg.png" alt="进程模型"></p><h3 id="代码架构" tabindex="-1">代码架构 <a class="header-anchor" href="#代码架构" aria-label="Permalink to &quot;代码架构&quot;">​</a></h3><p><strong>主进程</strong>(main.js): 在 Node.js 环境中运行，这意味着它具有 require 模块和使用所有 Node.js API 的能力。</p><p><strong>媒介脚本</strong>(preload.js):运行在渲染进程中，但这里能访问部分的node API,通过它向渲染进程中注册变量和方法，是进程通讯不可或缺的部分。</p><p><strong>渲染进程</strong>(index.html):一个完全的浏览器环境</p><h2 id="搭建一个工程" tabindex="-1">搭建⼀个⼯程 <a class="header-anchor" href="#搭建一个工程" aria-label="Permalink to &quot;搭建⼀个⼯程&quot;">​</a></h2><p><a href="https://www.electronjs.org/zh/docs/latest/tutorial/quick-start" target="_blank" rel="noreferrer">详情请看官网快速入门</a></p><ul><li>初始化⼀个包，并提填写好 package.json 中的必要信息及启动命令。</li></ul><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  &quot;name&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;my-electron-app&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  &quot;version&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;1.0.0&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  &quot;description&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Hello World!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  &quot;main&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;main.js&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  &quot;scripts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    &quot;test&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;echo </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\&quot;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">Error: no test specified</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\&quot;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &amp;&amp; exit 1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    &quot;start&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;nodemon --exec electron .&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  &quot;keywords&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    &quot;electron&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ],</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  &quot;author&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;wing&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  &quot;license&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;MIT&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  &quot;devDependencies&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    &quot;electron&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;^34.0.0&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    &quot;nodemon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;^3.1.9&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><ul><li>在 main.js 中编写代码，创建⼀个基本窗⼝</li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/*</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">main.js运⾏在应⽤的主进程上，⽆法访问Web相关API，主要负责：控制⽣命周期、显示界⾯、</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">控制渲染进程等其他操作。</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">*/</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  app</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  BrowserWindow</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;electron&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 在你文件顶部导入 Node.js 的 path 模块</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> path</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;node:path&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ⽤于创建窗⼝</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createWindow</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> win</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> BrowserWindow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">800</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 窗⼝宽度</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    height: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">600</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 窗⼝⾼度</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    autoHideMenuBar: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ⾃动隐藏菜单栏</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    alwaysOnTop: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 置顶</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    x: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 窗⼝位置x坐标</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    y: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 窗⼝位置y坐标</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    webPreferences: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      preload: path.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">join</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(__dirname, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;preload.js&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 主进程连接preload</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  })</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  win.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">loadFile</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;./pages/index.html&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 打开 DevTools</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  win.webContents.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">openDevTools</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 当app准备好后，执⾏createWindow创建窗⼝</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">whenReady</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">().</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  createWindow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 当应⽤被激活时</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;activate&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // 如果当前应⽤没有窗⼝，则创建⼀个新的窗⼝</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (BrowserWindow.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getAllWindows</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">().</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ===</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createWindow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  })</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 当app准备好后，执⾏createWindow创建窗⼝</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// app.on(&#39;ready&#39;, () =&gt; {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//   createWindow()</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//   当应⽤被激活时</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//   app.on(&#39;activate&#39;, () =&gt; {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//     如果当前应⽤没有窗⼝，则创建⼀个新的窗⼝</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//     if (BrowserWindow.getAllWindows().length === 0) createWindow()</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//   })</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// })</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 当所有窗⼝都关闭时</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;window-all-closed&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 如果所处平台不是mac(darwin)，则退出应⽤。</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (process.platform </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!==</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;darwin&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">quit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><p><code>app.whenReady().then()</code>与<code>app.on(&#39;ready&#39;, ()=&gt; {})</code>功能一样，whenReady是一个promise的形式，而后者是一回调函数的形式。你作为一个资深的程序猿一定懂的。</p><ul><li>创建 pages/index.html 编写内容：</li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;!</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">DOCTYPE</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> charset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;UTF-8&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> http-equiv</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Content-Security-Policy&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;default-src &#39;self&#39;; style-src &#39;self&#39; &#39;unsafe-inline&#39;; img-src &#39;self&#39; data:;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;index&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;你好啊！&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;btn&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;在⽤户的D盘创建⼀个hello.txt&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text/javascript&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;./render.js&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="warning custom-block github-alert"><p class="custom-block-title">WARNING</p><p>解决开发者⼯具会报出⼀个安全警告，需要配置 CSP(ContentSecurity-Policy) <code>&lt;meta http-equiv=&quot;Content-Security-Policy&quot; content=&quot;default-src &#39;self&#39;; style-src &#39;self&#39; &#39;unsafe-inline&#39;; img-src &#39;self&#39; data:;&quot;&gt;</code></p></div><p>上述配置的说明 1、 <strong><code>default-src &#39;self&#39;</code></strong></p><ul><li><code>default-src</code>: 配置加载策略，适⽤于所有未在其它指令中明确指定的资源类型。</li><li><code>self</code>: 仅允许从同源的资源加载，禁⽌从不受信任的外部来源加载，提⾼安全性。</li></ul><p>2、 <strong><code>style-src &#39;self&#39; &#39;unsafe-inline&#39;</code></strong></p><ul><li><code>style-src</code>: 指定样式表（CSS）的加载策略。</li><li><code>self</code>: 仅允许从同源的资源加载，禁⽌从不受信任的外部来源加载，提⾼安全性。</li><li><code>unsafe-inline</code>: 允许在HTML⽂档内使⽤内联样式。</li></ul><p>3、<strong><code>img-src &#39;self&#39; data:</code></strong></p><ul><li><code>img-src</code>：指定图像资源的加载策略。 *<code>self</code>: 表示仅允许从同源加载图像。 *<code>data:</code>: 允许使⽤ data: URI 来嵌⼊图像。这种URI模式允许将图像数据直接嵌 ⼊到HTML或CSS中，⽽不是通过外部链接引⽤。 关于 CSP 的详细说明请参考：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy" target="_blank" rel="noreferrer">MDN-Content-Security-Policy</a></li></ul><hr><ul><li>创建预加载脚本 preload.js ，内容如下：</li></ul><div class="info custom-block github-alert"><p class="custom-block-title">INFO</p><p>需求：点击按钮后，在⻚⾯呈现当前的 Node 版本。通过preload向渲染进程中注入变量（myAPI）</p></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">contextBridge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;electron&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 暴露数据给渲染进程</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">contextBridge.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">exposeInMainWorld</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;myAPI&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  n: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">666</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  version: process.version</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><ul><li>创建预加载脚本 render.js ，内容如下： 在渲染进程中使⽤ version</li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">btn.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addEventListener</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;click&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(myAPI.version)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  document.body.innerHTML </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> `&lt;h2&gt;${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">myAPI</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">version</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}&lt;/h2&gt;`</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><p>整体⽂件结构如下：</p><p><img src="/assets/%E2%BD%82%E4%BB%B6%E7%BB%93%E6%9E%84.C1m6AzLT.png" alt="文件结构"></p><h3 id="配置自动重启" tabindex="-1">配置⾃动重启 <a class="header-anchor" href="#配置自动重启" aria-label="Permalink to &quot;配置⾃动重启&quot;">​</a></h3><p>1、 安装 Nodemon</p><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> nodemon</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span></span></code></pre></div><p>2、 修改 package.json 命令</p><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;scripts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;start&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;nodemon --exec electron .&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">},</span></span></code></pre></div><p>3、 配置 <code>nodemon.json</code> 规则</p><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;ignore&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;node_modules&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;dist&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;restartable&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;r&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;watch&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;*.*&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;ext&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;html,js,css&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>配置好以后，当代码修改后，应⽤就会⾃动重启了。</p><h2 id="进程-代码架构" tabindex="-1">进程-代码架构 <a class="header-anchor" href="#进程-代码架构" aria-label="Permalink to &quot;进程-代码架构&quot;">​</a></h2><p><strong>主进程</strong>(main.js): 每个 Electron 应⽤都有⼀个单⼀的主进程，作为应⽤程序的⼊⼝点。 主进程在 Node.js 环境中运⾏，它具有 require 模块和使⽤所有 Node.js API 的能⼒，主进程的核⼼就是：<span style="color:orange;">使用 <strong>BrowserWindow</strong> 来创建和管理窗口。</span></p><p><strong>渲染进程</strong>(index.html): 每个 BrowserWindow 实例都对应⼀个单独的渲染器进程，运⾏在渲染器进程中的代码，必须遵守⽹⻚标准，这也就意味着：<span style="color:orange;">渲染进程无权直接反问require模块和使⽤任何Node.js API。</span></p><blockquote><p>问题产⽣：处于渲染器进程的⽤户界⾯，该怎样才与 Node.js 和 Electron 的原⽣桌⾯功能进⾏ 交互呢？</p></blockquote><p><strong>媒介脚本</strong>(preload.js):预加载（Preload）脚本是运⾏在渲染进程中的， 但它是在<!---->，这意味着它具有⽐普通渲染器代码更⾼的权限，可以访问 Node.js 的 API，同时⼜可以与⽹⻚内容进⾏安全 的交互。 简单说：它是 Node.js 和 Web API 的桥梁，Preload 脚本可以安全地将部分 Node.js 功能暴露给⽹⻚，从⽽减少安全⻛险。</p><h2 id="electron生命周期" tabindex="-1">electron生命周期 <a class="header-anchor" href="#electron生命周期" aria-label="Permalink to &quot;electron生命周期&quot;">​</a></h2><ul><li><strong>ready</strong>: app初始化完成，只执行一次</li><li><strong>dom-ready</strong>: 一个窗口加载文本加载完成时候</li><li><strong>did-finish-load</strong>: 导航完成时触发，记住时在dom-ready之后触发就可以了</li><li><strong>window-all-closed</strong>: 所有的窗口被关闭时触发</li><li><strong>before-quit</strong>: 在窗口关闭之前</li><li><strong>will-quit</strong>: 在窗口关闭并且应用退出时触发</li><li><strong>quit</strong>: 当窗口关闭时触发</li></ul></div></div></main><footer class="VPDocFooter" data-v-508e019d data-v-9772f039><!--[--><!--]--><div class="edit-info" data-v-9772f039><div class="edit-link" data-v-9772f039><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://gitee.com/lwj-wing/vite-note/edit/master/src/前端/Electron/Electron-01 electron概念、搭建⼀个⼯程.md" target="_blank" rel="noreferrer" data-v-9772f039><!--[--><span class="vpi-square-pen edit-link-icon" data-v-9772f039></span> 在Gitee上编辑此页 <!--]--></a></div><div class="last-updated" data-v-9772f039><p class="VPLastUpdated" data-v-9772f039 data-v-6e8d07ac>最后编辑时间: <time datetime="2025-01-24T06:45:10.000Z" data-v-6e8d07ac></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-9772f039><span class="visually-hidden" id="doc-footer-aria-label" data-v-9772f039>Pager</span><div class="pager" data-v-9772f039><!----></div><div class="pager" data-v-9772f039><a class="VPLink link pager-link next" href="/src/%E5%89%8D%E7%AB%AF/Electron/Electron-02%20%E8%BF%9B%E7%A8%8B%E9%80%9A%E8%AE%AF.html" data-v-9772f039><!--[--><span class="desc" data-v-9772f039>下一篇</span><span class="title" data-v-9772f039>Electron-02 进程通讯</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-59b6aa09 data-v-ab997ade><div class="container" data-v-ab997ade><p class="message" data-v-ab997ade>The future is promising</p><p class="copyright" data-v-ab997ade>Copyright © 2024-present Evan You</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"api-examples.md\":\"D02bY_kH\",\"index.md\":\"DqOr8Xbd\",\"markdown-examples.md\":\"CMEwRY7S\",\"src_前端_electron_electron-01 electron概念、搭建⼀个⼯程.md\":\"B2_jOGn7\",\"src_前端_electron_electron-02 进程通讯.md\":\"DqAOCgK-\",\"src_前端_electron_index.md\":\"fXcUF6_d\",\"src_前端_es6_es6-01 let、解构、模板、箭头.md\":\"g5ZIs0YN\",\"src_前端_es6_es6-02 扩展、symbol、iterator.md\":\"BBfez6p5\",\"src_前端_es6_es6-03 类、set、map.md\":\"BYgn7hRf\",\"src_前端_es6_es6-04 promise、async.md\":\"COUFI3NH\",\"src_前端_es6_es6-05 扩展.md\":\"CXPrToL_\",\"src_前端_es6_es6-06 module.md\":\"DCcst06e\",\"src_前端_es6_es6-07 proxy、reflect.md\":\"D2RdYqRI\",\"src_前端_es6_es6-08 新提案.md\":\"DZ19nl0v\",\"src_前端_es6_es6原理实现.md\":\"CWwAQ0AH\",\"src_前端_es6_index.md\":\"FoR1qj_L\",\"src_前端_html5_css 预编译器.md\":\"ByDIGcwq\",\"src_前端_html5_css小方法.md\":\"BnjXlpVe\",\"src_前端_html5_css常用布局.md\":\"LynnoER6\",\"src_前端_html5_css常见bug.md\":\"DMYNqpxP\",\"src_前端_html5_html-01 基础知识.md\":\"CEVaZz9A\",\"src_前端_html5_html-02 a标签，表格，表单.md\":\"yc5WPE8s\",\"src_前端_html5_html-03 css样式字体.md\":\"gJegfjPQ\",\"src_前端_html5_html-04 盒子模型 背景.md\":\"D4MyhWQ-\",\"src_前端_html5_html-05 元素转换、浮动.md\":\"FLK8PSFb\",\"src_前端_html5_html-06 定位 bfc.md\":\"BLE9U9ei\",\"src_前端_html5_html-07 布局方式 ie.md\":\"DM9VPQpJ\",\"src_前端_html5_html-08 雪碧图.md\":\"DWWxsyfK\",\"src_前端_html5_html-11 svg简介.md\":\"ux0kGj_x\",\"src_前端_html5_html-12 html5.md\":\"CjDyJ099\",\"src_前端_html5_html-13 css3选择器.md\":\"CVmiQNV4\",\"src_前端_html5_html-14 flex、grid、table.md\":\"DpDWJJ0N\",\"src_前端_html5_html-15 less css预处理器.md\":\"DSGKlvxf\",\"src_前端_html5_html-17 移动端布局.md\":\"BIZ_vn1o\",\"src_前端_html5_html-18 2d、3d动画.md\":\"lzpwsKi5\",\"src_前端_html5_html-19 filter.md\":\"DYHWOijt\",\"src_前端_html5_html面试问题.md\":\"DeaItgDA\",\"src_前端_html5_index.md\":\"7PNMxP4V\",\"src_前端_html5_reset.css.md\":\"Bmm_ZC94\",\"src_前端_html5_容易忘记的知识.md\":\"BgPsCGrL\",\"src_前端_html5_提高css开发效率.md\":\"BK0gpmbK\",\"src_前端_index.md\":\"BRfjlHBy\",\"src_前端_javascript_index.md\":\"qdUoRZXW\",\"src_前端_javascript_js-01 javascript 初始.md\":\"D_USRX_5\",\"src_前端_javascript_js-02 javascript数据类型篇.md\":\"4pH3xLvm\",\"src_前端_javascript_js-03 条件、循环、语句.md\":\"BDH7g7W-\",\"src_前端_javascript_js-04 自定义属性.md\":\"Bx_l3ppo\",\"src_前端_javascript_js-05 函数.md\":\"C1lzvqgu\",\"src_前端_javascript_js-06 定时器、时间、math.md\":\"BsMuSPgS\",\"src_前端_javascript_js-07 字符串、对象.md\":\"CBP34CNQ\",\"src_前端_javascript_js-08 数组.md\":\"DoV-MHEA\",\"src_前端_javascript_js-09 dom.md\":\"D0Gp9Mot\",\"src_前端_javascript_js-10 bom.md\":\"C_AhmjD0\",\"src_前端_javascript_js-11 事件对象.md\":\"BFdBQqjN\",\"src_前端_javascript_js-12 拖拽、缓冲、懒加载.md\":\"DJ9KUedV\",\"src_前端_javascript_js-13 cookie.md\":\"C0bV36SA\",\"src_前端_javascript_js-14 正则篇.md\":\"B-wagaab\",\"src_前端_javascript_js-15 面向对象、继承.md\":\"C9PhudED\",\"src_前端_javascript_js-16 闭包、高阶函数、ajax.md\":\"36PpR8Hy\",\"src_前端_javascript_js-17 拖拽api、文件上传、下载.md\":\"CdJzpGAh\",\"src_前端_javascript_js-18 其他api.md\":\"BYivjPN3\",\"src_前端_javascript_js-19 ajax、接口请求 跨域.md\":\"BHD15-DE\",\"src_前端_javascript_js小方法.md\":\"CnSOvmY-\",\"src_前端_javascript_js插件推荐.md\":\"CT5Ay2CH\",\"src_前端_javascript_js数据结构.md\":\"Bvn8LP33\",\"src_前端_javascript_js源码实现.md\":\"DVX8shu5\",\"src_前端_javascript_js理论面试题.md\":\"CYIkhEXl\",\"src_前端_javascript_js算法.md\":\"BxFBX0nD\",\"src_前端_javascript_js类型整合（助记）.md\":\"BlJAY9zn\",\"src_前端_javascript_js设计模式.md\":\"MPEOP48g\",\"src_前端_javascript_js面试问题.md\":\"B45ZNlis\",\"src_前端_javascript_lodash常用方法.md\":\"DGgL4-nF\",\"src_前端_jquery_index.md\":\"cx6Bxns1\",\"src_前端_jquery_jq-01 什么是jquery.md\":\"CLtsnivz\",\"src_前端_jquery_jq-02 选择器.md\":\"DiNJEuNh\",\"src_前端_jquery_jq-03 属性、位置.md\":\"7cbkTX_p\",\"src_前端_jquery_jq-04 事件和动画.md\":\"BWUv6jHZ\",\"src_前端_jquery_jq-05 ajax 自定义jquery插件.md\":\"Cx-DW66l\",\"src_前端_mini-programe_index.md\":\"COjfWa7M\",\"src_前端_mini-programe_小程序-01 小程序入门.md\":\"ZbaKJc31\",\"src_前端_mini-programe_小程序-02 模板、组件.md\":\"CVYdIn7-\",\"src_前端_mini-programe_小程序-03  媒体组件.md\":\"u7oIZ12m\",\"src_前端_mini-programe_小程序-04  api.md\":\"o4bGRLyc\",\"src_前端_mini-programe_小程序-05 路由封装.md\":\"_hKBQCZR\",\"src_前端_mini-programe_小程序-07 mpvue.md\":\"Ham2Kc4z\",\"src_前端_nextjs_index.md\":\"Bn5HJ8Qu\",\"src_前端_nextjs_next-01 服务端组件、客户端组件、不同类型组件交叉使用的注意点、缓存.md\":\"jlFJVS5D\",\"src_前端_nextjs_next-02 路由处理程序、serveraction.md\":\"9UyM2mZz\",\"src_前端_node_http状态码.md\":\"CiZwi2wu\",\"src_前端_node_index.md\":\"AXtvF6Rn\",\"src_前端_node_node-01 http nodejs.md\":\"P8IkJsJD\",\"src_前端_node_node-02 路由、path、模块.md\":\"ffIcpBiC\",\"src_前端_node_node-03 fs文件.md\":\"B4lIjb-T\",\"src_前端_node_node-04 express 跨域.md\":\"CzJXH_iR\",\"src_前端_node_node-05 restful、爬虫.md\":\"CPV5fMJK\",\"src_前端_node_node-06 加密 cookie ejs.md\":\"BKYSoC4L\",\"src_前端_node_node-07 模板化.md\":\"BZAsusLM\",\"src_前端_node_node-08 mongodb.md\":\"BXmmyUGm\",\"src_前端_node_node-09 mongoose.md\":\"CcTRmIpe\",\"src_前端_node_node-10 websocket.md\":\"C7KZM5nb\",\"src_前端_node_node使用babel.md\":\"DoD_cFWw\",\"src_前端_node_node常用指令.md\":\"ScU6hl-1\",\"src_前端_node_node插件分享.md\":\"_voRW8be\",\"src_前端_node_node项目实例.md\":\"B3fKqsiR\",\"src_前端_node_node项目小技巧.md\":\"B5ox8Wnn\",\"src_前端_other-note_animate.css使用方法.md\":\"B7zLxnfh\",\"src_前端_other-note_ast抽象语法树.md\":\"Cy7aGHYi\",\"src_前端_other-note_bootstrap 全局css样式.md\":\"CK8fVLW6\",\"src_前端_other-note_canvas.md\":\"DcDaBioB\",\"src_前端_other-note_git.md\":\"BzGlgr8Z\",\"src_前端_other-note_hexo搭建个人博客.md\":\"C0UpIBa4\",\"src_前端_other-note_immutable.md\":\"BUoFMfpJ\",\"src_前端_other-note_index.md\":\"DxYJZUpO\",\"src_前端_other-note_mac使用技巧.md\":\"xSxJhB7-\",\"src_前端_other-note_markdown语法.md\":\"D7_j3BnF\",\"src_前端_other-note_mobx.md\":\"DjHZ_72x\",\"src_前端_other-note_typora设置.md\":\"D27814An\",\"src_前端_other-note_vs code 使用技巧.md\":\"BVAkp6bU\",\"src_前端_other-note_vuepress搭建个人博客.md\":\"pToIdJAS\",\"src_前端_other-note_七牛云cdn加速图片.md\":\"BjT7v2_J\",\"src_前端_other-note_包管理工具.md\":\"Tg-3oxy3\",\"src_前端_other-note_团队协作工具.md\":\"hUAGQIIJ\",\"src_前端_other-note_微信分享.md\":\"Co6XkI4r\",\"src_前端_other-note_未学知识.md\":\"Dg2C7nbT\",\"src_前端_other-note_浏览器技巧.md\":\"U9LYUf1k\",\"src_前端_other-note_百度地图api.md\":\"B83RWuvc\",\"src_前端_other-note_配置支付宝接口.md\":\"e_iGUHrb\",\"src_前端_other-note_面试复习.md\":\"Bbs6GqpM\",\"src_前端_react-native_index.md\":\"Dpt_eiNy\",\"src_前端_react-native_rn-01 react-native.md\":\"DL9V9bYr\",\"src_前端_react_hooks实现原理.md\":\"CP83fYpH\",\"src_前端_react_index.md\":\"VDlFYWPP\",\"src_前端_react_reach__router.md\":\"DqFmLiVz\",\"src_前端_react_react-01 初识.md\":\"Bt1LZ9QT\",\"src_前端_react_react-02 脚手架、jsx.md\":\"DnNp_Mdw\",\"src_前端_react_react-03 组件通讯、生命周期.md\":\"BXhqyPZB\",\"src_前端_react_react-04 路由.md\":\"Crt7SVdX\",\"src_前端_react_react-05 其他api.md\":\"CYhCYrRI\",\"src_前端_react_react-06 redux.md\":\"unyiBMp2\",\"src_前端_react_react-07 hooks.md\":\"sA9yBlzf\",\"src_前端_react_react-08 高阶组件.md\":\"Cwz3MOSL\",\"src_前端_react_react-09 项目优化、项目坑.md\":\"BRsexucu\",\"src_前端_react_react-10 服务端渲染.md\":\"Co70wCB7\",\"src_前端_react_react写测试.md\":\"CP5CjQ6F\",\"src_前端_react_react常用插件.md\":\"CkEQBVub\",\"src_前端_react_react搭建项目.md\":\"B0zFM4kA\",\"src_前端_react_react面试.md\":\"D5TvKvfP\",\"src_前端_react_常用自定义hooks.md\":\"Dt15GMps\",\"src_前端_server_index.md\":\"Dq336_-M\",\"src_前端_server_linux-01 系统知识.md\":\"DZwWXZmP\",\"src_前端_server_linux-02 基本操作.md\":\"Bfhow8Wb\",\"src_前端_server_linux-03 文件操作.md\":\"78vSmjpz\",\"src_前端_server_linux-04 vim编辑器.md\":\"Cg7jFpHc\",\"src_前端_server_linux-05 基本管理.md\":\"C8_S0GU7\",\"src_前端_server_linux-06 shell基础.md\":\"D5C-4wk3\",\"src_前端_server_linux-07 shell语句.md\":\"BoQysxiH\",\"src_前端_server_linux常用.md\":\"C-ynQ-iq\",\"src_前端_server_nginx配置.md\":\"D5D2mEje\",\"src_前端_server_ubuntu教程.md\":\"CjB3Rnwx\",\"src_前端_server_宝塔面板搭建服务器.md\":\"Bkl3dDFK\",\"src_前端_typescript_index.md\":\"CkIHS7tD\",\"src_前端_typescript_ts-01 基础类型.md\":\"2irzp8ud\",\"src_前端_typescript_ts-02 接口、函数.md\":\"CQPjs5h9\",\"src_前端_typescript_ts-03 泛型、类.md\":\"Cf-jJPYb\",\"src_前端_typescript_ts-04 枚举、类型推论.md\":\"C48d6bcr\",\"src_前端_typescript_ts-05 高级类型.md\":\"IwuPz0Ol\",\"src_前端_typescript_ts-06 命名空间、声明合并.md\":\"DFd9FqBg\",\"src_前端_typescript_ts-07 装饰器、mixins.md\":\"lH-tyqye\",\"src_前端_typescript_ts-08 声明文件、模块解析.md\":\"D2falCuC\",\"src_前端_typescript_ts-09 其他.md\":\"CURsW23Z\",\"src_前端_typescript_ts-类型收集.md\":\"3M_3UMV1\",\"src_前端_typescript_tsconfig.md\":\"DT8xWB-9\",\"src_前端_typescript_ts实战例子.md\":\"D0KciTHX\",\"src_前端_typescript_ts开发环境搭建.md\":\"CUHjBroV\",\"src_前端_typescript_typescript_react.md\":\"y_jcUPo1\",\"src_前端_typescript_typescript_vue.md\":\"CWtHmSBj\",\"src_前端_typescript_总结typescript.md\":\"DUYuNSSl\",\"src_前端_vue_index.md\":\"B0JBklst\",\"src_前端_vue_vue-01 初识vue.md\":\"SOvwAZPJ\",\"src_前端_vue_vue-02 修饰符 表单.md\":\"CgFIlVww\",\"src_前端_vue_vue-03 组件 prop.md\":\"RH8VaFdf\",\"src_前端_vue_vue-04 组件通讯 插槽.md\":\"C4K6FJfE\",\"src_前端_vue_vue-05 过渡 生命周期.md\":\"BoBdrNG_\",\"src_前端_vue_vue-06 router.md\":\"660siYST\",\"src_前端_vue_vue-07 vuex.md\":\"BNXCUpOf\",\"src_前端_vue_vue-08 插件开发.md\":\"BinZaAAy\",\"src_前端_vue_vue3-api.md\":\"DetXSE0o\",\"src_前端_vue_vue3-vue2不同点.md\":\"4iMrwEBZ\",\"src_前端_vue_vue3造轮子常用.md\":\"DB27lE9m\",\"src_前端_vue_vue实战技巧.md\":\"Cwk98MqW\",\"src_前端_vue_vue造轮子常用方法.md\":\"B4sK0yoI\",\"src_前端_vue_vue面试题.md\":\"BdwVFGqK\",\"src_前端_vue_vue项目bug记录.md\":\"BuFCw_9h\",\"src_前端_webpack_index.md\":\"7RBPSido\",\"src_前端_webpack_webpack-01 服务、配置项.md\":\"BsGfbj18\",\"src_前端_webpack_webpack-02 处理js、暴露全局变量.md\":\"Y5LoVDrh\",\"src_前端_webpack_webpack-03 多页面、source-map、实时打包.md\":\"CLCC-6U8\",\"src_前端_webpack_webpack-04  优化、动态链接库、多线程打包.md\":\"DJxIyLbD\",\"src_前端_webpack_webpack-05 抽离公共模块、懒加载.md\":\"DEEvQ0Rd\",\"src_前端_webpack_webpack原理.md\":\"CJgcFCvW\",\"src_前端_webpack_webpack插件.md\":\"C4e1liYh\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Wing's Note\",\"description\":\"前端\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"returnToTopLabel\":\"回到顶部\",\"footer\":{\"message\":\"The future is promising\",\"copyright\":\"Copyright © 2024-present Evan You\"},\"logo\":\"/logo.png\",\"outline\":{\"label\":\"页面导航\"},\"nav\":[{\"text\":\"Vue\",\"link\":\"/src/前端/Vue/\"},{\"text\":\"Typescript\",\"link\":\"/src/前端/Typescript/\"},{\"text\":\"Javascript\",\"link\":\"/src/前端/Javascript/\"},{\"text\":\"html5\",\"link\":\"/src/前端/html5/\"},{\"text\":\"前端\",\"items\":[{\"text\":\"Electron\",\"link\":\"/src/前端/Electron/\",\"activeMatch\":\"/src/前端/Electron/\"},{\"text\":\"Javascript\",\"link\":\"/src/前端/Javascript/\",\"activeMatch\":\"/src/前端/Javascript/\"},{\"text\":\"Nextjs\",\"link\":\"/src/前端/Nextjs/\",\"activeMatch\":\"/src/前端/Nextjs/\"},{\"text\":\"React\",\"link\":\"/src/前端/React/\",\"activeMatch\":\"/src/前端/React/\"},{\"text\":\"Server\",\"link\":\"/src/前端/Server/\",\"activeMatch\":\"/src/前端/Server/\"},{\"text\":\"Typescript\",\"link\":\"/src/前端/Typescript/\",\"activeMatch\":\"/src/前端/Typescript/\"},{\"text\":\"Vue\",\"link\":\"/src/前端/Vue/\",\"activeMatch\":\"/src/前端/Vue/\"},{\"text\":\"Webpack\",\"link\":\"/src/前端/Webpack/\",\"activeMatch\":\"/src/前端/Webpack/\"},{\"text\":\"es6\",\"link\":\"/src/前端/es6/\",\"activeMatch\":\"/src/前端/es6/\"},{\"text\":\"html5\",\"link\":\"/src/前端/html5/\",\"activeMatch\":\"/src/前端/html5/\"},{\"text\":\"index\",\"link\":\"/src/前端/index\",\"activeMatch\":\"/src/前端/index/\"},{\"text\":\"jQuery\",\"link\":\"/src/前端/jQuery/\",\"activeMatch\":\"/src/前端/jQuery/\"},{\"text\":\"mini-programe\",\"link\":\"/src/前端/mini-programe/\",\"activeMatch\":\"/src/前端/mini-programe/\"},{\"text\":\"node\",\"link\":\"/src/前端/node/\",\"activeMatch\":\"/src/前端/node/\"},{\"text\":\"other-note\",\"link\":\"/src/前端/other-note/\",\"activeMatch\":\"/src/前端/other-note/\"},{\"text\":\"react-native\",\"link\":\"/src/前端/react-native/\",\"activeMatch\":\"/src/前端/react-native/\"}],\"activeMatch\":\"/src/前端/\"}],\"sidebar\":{\"/src/前端/Electron\":{\"text\":\"Electron\",\"items\":[{\"text\":\"Electron-01 electron概念、搭建⼀个⼯程\",\"link\":\"/src/前端/Electron/Electron-01 electron概念、搭建⼀个⼯程\"},{\"text\":\"Electron-02 进程通讯\",\"link\":\"/src/前端/Electron/Electron-02 进程通讯\"}]},\"/src/前端/Javascript\":{\"text\":\"Javascript\",\"items\":[{\"text\":\"js-01 javascript 初始\",\"link\":\"/src/前端/Javascript/js-01 javascript 初始\"},{\"text\":\"js-02 javascript数据类型篇\",\"link\":\"/src/前端/Javascript/js-02 javascript数据类型篇\"},{\"text\":\"js-03 条件、循环、语句\",\"link\":\"/src/前端/Javascript/js-03 条件、循环、语句\"},{\"text\":\"js-04 自定义属性\",\"link\":\"/src/前端/Javascript/js-04 自定义属性\"},{\"text\":\"js-05 函数\",\"link\":\"/src/前端/Javascript/js-05 函数\"},{\"text\":\"js-06 定时器、时间、Math\",\"link\":\"/src/前端/Javascript/js-06 定时器、时间、Math\"},{\"text\":\"js-07 字符串、对象\",\"link\":\"/src/前端/Javascript/js-07 字符串、对象\"},{\"text\":\"js-08 数组\",\"link\":\"/src/前端/Javascript/js-08 数组\"},{\"text\":\"js-09 DOM\",\"link\":\"/src/前端/Javascript/js-09 DOM\"},{\"text\":\"js-10 BOM\",\"link\":\"/src/前端/Javascript/js-10 BOM\"},{\"text\":\"js-11 事件对象\",\"link\":\"/src/前端/Javascript/js-11 事件对象\"},{\"text\":\"js-12 拖拽、缓冲、懒加载\",\"link\":\"/src/前端/Javascript/js-12 拖拽、缓冲、懒加载\"},{\"text\":\"js-13 cookie\",\"link\":\"/src/前端/Javascript/js-13 cookie\"},{\"text\":\"js-14 正则篇\",\"link\":\"/src/前端/Javascript/js-14 正则篇\"},{\"text\":\"js-15 面向对象、继承\",\"link\":\"/src/前端/Javascript/js-15 面向对象、继承\"},{\"text\":\"js-16 闭包、高阶函数、ajax\",\"link\":\"/src/前端/Javascript/js-16 闭包、高阶函数、ajax\"},{\"text\":\"js-17 拖拽API、文件上传、下载\",\"link\":\"/src/前端/Javascript/js-17 拖拽API、文件上传、下载\"},{\"text\":\"js-18 其他API\",\"link\":\"/src/前端/Javascript/js-18 其他API\"},{\"text\":\"js-19 ajax、接口请求 跨域\",\"link\":\"/src/前端/Javascript/js-19 ajax、接口请求 跨域\"},{\"text\":\"js小方法\",\"link\":\"/src/前端/Javascript/js小方法\"},{\"text\":\"js插件推荐\",\"link\":\"/src/前端/Javascript/js插件推荐\"},{\"text\":\"js数据结构\",\"link\":\"/src/前端/Javascript/js数据结构\"},{\"text\":\"js源码实现\",\"link\":\"/src/前端/Javascript/js源码实现\"},{\"text\":\"js理论面试题\",\"link\":\"/src/前端/Javascript/js理论面试题\"},{\"text\":\"js算法\",\"link\":\"/src/前端/Javascript/js算法\"},{\"text\":\"js类型整合（助记）\",\"link\":\"/src/前端/Javascript/js类型整合（助记）\"},{\"text\":\"js设计模式\",\"link\":\"/src/前端/Javascript/js设计模式\"},{\"text\":\"js面试问题\",\"link\":\"/src/前端/Javascript/js面试问题\"},{\"text\":\"lodash常用方法\",\"link\":\"/src/前端/Javascript/lodash常用方法\"}]},\"/src/前端/Nextjs\":{\"text\":\"Nextjs\",\"items\":[{\"text\":\"Next-01 服务端组件、客户端组件、不同类型组件交叉使用的注意点、缓存\",\"link\":\"/src/前端/Nextjs/Next-01 服务端组件、客户端组件、不同类型组件交叉使用的注意点、缓存\"},{\"text\":\"Next-02 路由处理程序、ServerAction\",\"link\":\"/src/前端/Nextjs/Next-02 路由处理程序、ServerAction\"}]},\"/src/前端/React\":{\"text\":\"React\",\"items\":[{\"text\":\"Reach__router\",\"link\":\"/src/前端/React/Reach__router\"},{\"text\":\"React写测试\",\"link\":\"/src/前端/React/React写测试\"},{\"text\":\"React搭建项目\",\"link\":\"/src/前端/React/React搭建项目\"},{\"text\":\"React面试\",\"link\":\"/src/前端/React/React面试\"},{\"text\":\"hooks实现原理\",\"link\":\"/src/前端/React/hooks实现原理\"},{\"text\":\"react-01 初识\",\"link\":\"/src/前端/React/react-01 初识\"},{\"text\":\"react-02 脚手架、JSX\",\"link\":\"/src/前端/React/react-02 脚手架、JSX\"},{\"text\":\"react-03 组件通讯、生命周期\",\"link\":\"/src/前端/React/react-03 组件通讯、生命周期\"},{\"text\":\"react-04 路由\",\"link\":\"/src/前端/React/react-04 路由\"},{\"text\":\"react-05 其他Api\",\"link\":\"/src/前端/React/react-05 其他Api\"},{\"text\":\"react-06 Redux\",\"link\":\"/src/前端/React/react-06 Redux\"},{\"text\":\"react-07 hooks\",\"link\":\"/src/前端/React/react-07 hooks\"},{\"text\":\"react-08 高阶组件\",\"link\":\"/src/前端/React/react-08 高阶组件\"},{\"text\":\"react-09 项目优化、项目坑\",\"link\":\"/src/前端/React/react-09 项目优化、项目坑\"},{\"text\":\"react-10 服务端渲染\",\"link\":\"/src/前端/React/react-10 服务端渲染\"},{\"text\":\"react常用插件\",\"link\":\"/src/前端/React/react常用插件\"},{\"text\":\"常用自定义hooks\",\"link\":\"/src/前端/React/常用自定义hooks\"}]},\"/src/前端/Server\":{\"text\":\"Server\",\"items\":[{\"text\":\"linux-01 系统知识\",\"link\":\"/src/前端/Server/linux-01 系统知识\"},{\"text\":\"linux-02 基本操作\",\"link\":\"/src/前端/Server/linux-02 基本操作\"},{\"text\":\"linux-03 文件操作\",\"link\":\"/src/前端/Server/linux-03 文件操作\"},{\"text\":\"linux-04 vim编辑器\",\"link\":\"/src/前端/Server/linux-04 vim编辑器\"},{\"text\":\"linux-05 基本管理\",\"link\":\"/src/前端/Server/linux-05 基本管理\"},{\"text\":\"linux-06 shell基础\",\"link\":\"/src/前端/Server/linux-06 shell基础\"},{\"text\":\"linux-07 shell语句\",\"link\":\"/src/前端/Server/linux-07 shell语句\"},{\"text\":\"linux常用\",\"link\":\"/src/前端/Server/linux常用\"},{\"text\":\"nginx配置\",\"link\":\"/src/前端/Server/nginx配置\"},{\"text\":\"ubuntu教程\",\"link\":\"/src/前端/Server/ubuntu教程\"},{\"text\":\"宝塔面板搭建服务器\",\"link\":\"/src/前端/Server/宝塔面板搭建服务器\"}]},\"/src/前端/Typescript\":{\"text\":\"Typescript\",\"items\":[{\"text\":\"ts-01 基础类型\",\"link\":\"/src/前端/Typescript/ts-01 基础类型\"},{\"text\":\"ts-02 接口、函数\",\"link\":\"/src/前端/Typescript/ts-02 接口、函数\"},{\"text\":\"ts-03 泛型、类\",\"link\":\"/src/前端/Typescript/ts-03 泛型、类\"},{\"text\":\"ts-04 枚举、类型推论\",\"link\":\"/src/前端/Typescript/ts-04 枚举、类型推论\"},{\"text\":\"ts-05 高级类型\",\"link\":\"/src/前端/Typescript/ts-05 高级类型\"},{\"text\":\"ts-06 命名空间、声明合并\",\"link\":\"/src/前端/Typescript/ts-06 命名空间、声明合并\"},{\"text\":\"ts-07 装饰器、Mixins\",\"link\":\"/src/前端/Typescript/ts-07 装饰器、Mixins\"},{\"text\":\"ts-08 声明文件、模块解析\",\"link\":\"/src/前端/Typescript/ts-08 声明文件、模块解析\"},{\"text\":\"ts-09 其他\",\"link\":\"/src/前端/Typescript/ts-09 其他\"},{\"text\":\"ts-类型收集\",\"link\":\"/src/前端/Typescript/ts-类型收集\"},{\"text\":\"tsconfig\",\"link\":\"/src/前端/Typescript/tsconfig\"},{\"text\":\"ts实战例子\",\"link\":\"/src/前端/Typescript/ts实战例子\"},{\"text\":\"ts开发环境搭建\",\"link\":\"/src/前端/Typescript/ts开发环境搭建\"},{\"text\":\"typescript_react\",\"link\":\"/src/前端/Typescript/typescript_react\"},{\"text\":\"typescript_vue\",\"link\":\"/src/前端/Typescript/typescript_vue\"},{\"text\":\"总结Typescript\",\"link\":\"/src/前端/Typescript/总结Typescript\"}]},\"/src/前端/Vue\":{\"text\":\"Vue\",\"items\":[{\"text\":\"Vue3-API\",\"link\":\"/src/前端/Vue/Vue3-API\"},{\"text\":\"Vue3-Vue2不同点\",\"link\":\"/src/前端/Vue/Vue3-Vue2不同点\"},{\"text\":\"Vue3造轮子常用\",\"link\":\"/src/前端/Vue/Vue3造轮子常用\"},{\"text\":\"vue-01 初识vue\",\"link\":\"/src/前端/Vue/vue-01 初识vue\"},{\"text\":\"vue-02 修饰符 表单\",\"link\":\"/src/前端/Vue/vue-02 修饰符 表单\"},{\"text\":\"vue-03 组件 Prop\",\"link\":\"/src/前端/Vue/vue-03 组件 Prop\"},{\"text\":\"vue-04 组件通讯 插槽\",\"link\":\"/src/前端/Vue/vue-04 组件通讯 插槽\"},{\"text\":\"vue-05 过渡 生命周期\",\"link\":\"/src/前端/Vue/vue-05 过渡 生命周期\"},{\"text\":\"vue-06 Router\",\"link\":\"/src/前端/Vue/vue-06 Router\"},{\"text\":\"vue-07 Vuex\",\"link\":\"/src/前端/Vue/vue-07 Vuex\"},{\"text\":\"vue-08 插件开发\",\"link\":\"/src/前端/Vue/vue-08 插件开发\"},{\"text\":\"vue实战技巧\",\"link\":\"/src/前端/Vue/vue实战技巧\"},{\"text\":\"vue造轮子常用方法\",\"link\":\"/src/前端/Vue/vue造轮子常用方法\"},{\"text\":\"vue面试题\",\"link\":\"/src/前端/Vue/vue面试题\"},{\"text\":\"vue项目bug记录\",\"link\":\"/src/前端/Vue/vue项目bug记录\"}]},\"/src/前端/Webpack\":{\"text\":\"Webpack\",\"items\":[{\"text\":\"webpack-01 服务、配置项\",\"link\":\"/src/前端/Webpack/webpack-01 服务、配置项\"},{\"text\":\"webpack-02 处理js、暴露全局变量\",\"link\":\"/src/前端/Webpack/webpack-02 处理js、暴露全局变量\"},{\"text\":\"webpack-03 多页面、source-map、实时打包\",\"link\":\"/src/前端/Webpack/webpack-03 多页面、source-map、实时打包\"},{\"text\":\"webpack-04  优化、动态链接库、多线程打包\",\"link\":\"/src/前端/Webpack/webpack-04  优化、动态链接库、多线程打包\"},{\"text\":\"webpack-05 抽离公共模块、懒加载\",\"link\":\"/src/前端/Webpack/webpack-05 抽离公共模块、懒加载\"},{\"text\":\"webpack原理\",\"link\":\"/src/前端/Webpack/webpack原理\"},{\"text\":\"webpack插件\",\"link\":\"/src/前端/Webpack/webpack插件\"}]},\"/src/前端/es6\":{\"text\":\"es6\",\"items\":[{\"text\":\"es6-01 let、解构、模板、箭头\",\"link\":\"/src/前端/es6/es6-01 let、解构、模板、箭头\"},{\"text\":\"es6-02 扩展、Symbol、iterator\",\"link\":\"/src/前端/es6/es6-02 扩展、Symbol、iterator\"},{\"text\":\"es6-03 类、set、map\",\"link\":\"/src/前端/es6/es6-03 类、set、map\"},{\"text\":\"es6-04 Promise、async\",\"link\":\"/src/前端/es6/es6-04 Promise、async\"},{\"text\":\"es6-05 扩展\",\"link\":\"/src/前端/es6/es6-05 扩展\"},{\"text\":\"es6-06 module\",\"link\":\"/src/前端/es6/es6-06 module\"},{\"text\":\"es6-07 proxy、Reflect\",\"link\":\"/src/前端/es6/es6-07 proxy、Reflect\"},{\"text\":\"es6-08 新提案\",\"link\":\"/src/前端/es6/es6-08 新提案\"},{\"text\":\"es6原理实现\",\"link\":\"/src/前端/es6/es6原理实现\"}]},\"/src/前端/html5\":{\"text\":\"html5\",\"items\":[{\"text\":\"CSS 预编译器\",\"link\":\"/src/前端/html5/CSS 预编译器\"},{\"text\":\"CSS常用布局\",\"link\":\"/src/前端/html5/CSS常用布局\"},{\"text\":\"css小方法\",\"link\":\"/src/前端/html5/css小方法\"},{\"text\":\"css常见bug\",\"link\":\"/src/前端/html5/css常见bug\"},{\"text\":\"html-01 基础知识\",\"link\":\"/src/前端/html5/html-01 基础知识\"},{\"text\":\"html-02 a标签，表格，表单\",\"link\":\"/src/前端/html5/html-02 a标签，表格，表单\"},{\"text\":\"html-03 CSS样式字体\",\"link\":\"/src/前端/html5/html-03 CSS样式字体\"},{\"text\":\"html-04 盒子模型 背景\",\"link\":\"/src/前端/html5/html-04 盒子模型 背景\"},{\"text\":\"html-05 元素转换、浮动\",\"link\":\"/src/前端/html5/html-05 元素转换、浮动\"},{\"text\":\"html-06 定位 BFC\",\"link\":\"/src/前端/html5/html-06 定位 BFC\"},{\"text\":\"html-07 布局方式 IE\",\"link\":\"/src/前端/html5/html-07 布局方式 IE\"},{\"text\":\"html-08 雪碧图\",\"link\":\"/src/前端/html5/html-08 雪碧图\"},{\"text\":\"html-11 Svg简介\",\"link\":\"/src/前端/html5/html-11 Svg简介\"},{\"text\":\"html-12 HTML5\",\"link\":\"/src/前端/html5/html-12 HTML5\"},{\"text\":\"html-13 CSS3选择器\",\"link\":\"/src/前端/html5/html-13 CSS3选择器\"},{\"text\":\"html-14 flex、grid、table\",\"link\":\"/src/前端/html5/html-14 flex、grid、table\"},{\"text\":\"html-15 LESS css预处理器\",\"link\":\"/src/前端/html5/html-15 LESS css预处理器\"},{\"text\":\"html-17 移动端布局\",\"link\":\"/src/前端/html5/html-17 移动端布局\"},{\"text\":\"html-18 2D、3D动画\",\"link\":\"/src/前端/html5/html-18 2D、3D动画\"},{\"text\":\"html-19 filter\",\"link\":\"/src/前端/html5/html-19 filter\"},{\"text\":\"html面试问题\",\"link\":\"/src/前端/html5/html面试问题\"},{\"text\":\"reset.css\",\"link\":\"/src/前端/html5/reset.css\"},{\"text\":\"容易忘记的知识\",\"link\":\"/src/前端/html5/容易忘记的知识\"},{\"text\":\"提高css开发效率\",\"link\":\"/src/前端/html5/提高css开发效率\"}]},\"/src/前端/jQuery\":{\"text\":\"jQuery\",\"items\":[{\"text\":\"jq-01 什么是jQuery\",\"link\":\"/src/前端/jQuery/jq-01 什么是jQuery\"},{\"text\":\"jq-02 选择器\",\"link\":\"/src/前端/jQuery/jq-02 选择器\"},{\"text\":\"jq-03 属性、位置\",\"link\":\"/src/前端/jQuery/jq-03 属性、位置\"},{\"text\":\"jq-04 事件和动画\",\"link\":\"/src/前端/jQuery/jq-04 事件和动画\"},{\"text\":\"jq-05 ajax 自定义jquery插件\",\"link\":\"/src/前端/jQuery/jq-05 ajax 自定义jquery插件\"}]},\"/src/前端/mini-programe\":{\"text\":\"mini-programe\",\"items\":[{\"text\":\"小程序-01 小程序入门\",\"link\":\"/src/前端/mini-programe/小程序-01 小程序入门\"},{\"text\":\"小程序-02 模板、组件\",\"link\":\"/src/前端/mini-programe/小程序-02 模板、组件\"},{\"text\":\"小程序-03  媒体组件\",\"link\":\"/src/前端/mini-programe/小程序-03  媒体组件\"},{\"text\":\"小程序-04  API\",\"link\":\"/src/前端/mini-programe/小程序-04  API\"},{\"text\":\"小程序-05 路由封装\",\"link\":\"/src/前端/mini-programe/小程序-05 路由封装\"},{\"text\":\"小程序-07 mpvue\",\"link\":\"/src/前端/mini-programe/小程序-07 mpvue\"}]},\"/src/前端/node\":{\"text\":\"node\",\"items\":[{\"text\":\"HTTP状态码\",\"link\":\"/src/前端/node/HTTP状态码\"},{\"text\":\"index的副本.assets\",\"collapsed\":false,\"items\":[],\"collapsible\":true},{\"text\":\"node-01 http nodejs\",\"link\":\"/src/前端/node/node-01 http nodejs\"},{\"text\":\"node-02 路由、path、模块\",\"link\":\"/src/前端/node/node-02 路由、path、模块\"},{\"text\":\"node-03 fs文件\",\"link\":\"/src/前端/node/node-03 fs文件\"},{\"text\":\"node-04 express 跨域\",\"link\":\"/src/前端/node/node-04 express 跨域\"},{\"text\":\"node-05 RESTful、爬虫\",\"link\":\"/src/前端/node/node-05 RESTful、爬虫\"},{\"text\":\"node-06 加密 cookie ejs\",\"link\":\"/src/前端/node/node-06 加密 cookie ejs\"},{\"text\":\"node-07 模板化\",\"link\":\"/src/前端/node/node-07 模板化\"},{\"text\":\"node-08 mongodb\",\"link\":\"/src/前端/node/node-08 mongodb\"},{\"text\":\"node-09 mongoose\",\"link\":\"/src/前端/node/node-09 mongoose\"},{\"text\":\"node-10 websocket\",\"link\":\"/src/前端/node/node-10 websocket\"},{\"text\":\"node使用babel\",\"link\":\"/src/前端/node/node使用babel\"},{\"text\":\"node常用指令\",\"link\":\"/src/前端/node/node常用指令\"},{\"text\":\"node插件分享\",\"link\":\"/src/前端/node/node插件分享\"},{\"text\":\"node项目实例\",\"link\":\"/src/前端/node/node项目实例\"},{\"text\":\"node项目小技巧\",\"link\":\"/src/前端/node/node项目小技巧\"}]},\"/src/前端/other-note\":{\"text\":\"other-note\",\"items\":[{\"text\":\"AST抽象语法树\",\"link\":\"/src/前端/other-note/AST抽象语法树\"},{\"text\":\"Immutable\",\"link\":\"/src/前端/other-note/Immutable\"},{\"text\":\"Mac使用技巧\",\"link\":\"/src/前端/other-note/Mac使用技巧\"},{\"text\":\"Markdown语法\",\"link\":\"/src/前端/other-note/Markdown语法\"},{\"text\":\"Typora设置\",\"link\":\"/src/前端/other-note/Typora设置\"},{\"text\":\"VS code 使用技巧\",\"link\":\"/src/前端/other-note/VS code 使用技巧\"},{\"text\":\"VuePress搭建个人博客\",\"link\":\"/src/前端/other-note/VuePress搭建个人博客\"},{\"text\":\"animate.css使用方法\",\"link\":\"/src/前端/other-note/animate.css使用方法\"},{\"text\":\"bootstrap 全局css样式\",\"link\":\"/src/前端/other-note/bootstrap 全局css样式\"},{\"text\":\"canvas\",\"link\":\"/src/前端/other-note/canvas\"},{\"text\":\"git\",\"link\":\"/src/前端/other-note/git\"},{\"text\":\"hexo搭建个人博客\",\"link\":\"/src/前端/other-note/hexo搭建个人博客\"},{\"text\":\"mobx\",\"link\":\"/src/前端/other-note/mobx\"},{\"text\":\"七牛云cdn加速图片\",\"link\":\"/src/前端/other-note/七牛云cdn加速图片\"},{\"text\":\"包管理工具\",\"link\":\"/src/前端/other-note/包管理工具\"},{\"text\":\"团队协作工具\",\"link\":\"/src/前端/other-note/团队协作工具\"},{\"text\":\"微信分享\",\"link\":\"/src/前端/other-note/微信分享\"},{\"text\":\"未学知识\",\"link\":\"/src/前端/other-note/未学知识\"},{\"text\":\"浏览器技巧\",\"link\":\"/src/前端/other-note/浏览器技巧\"},{\"text\":\"百度地图API\",\"link\":\"/src/前端/other-note/百度地图API\"},{\"text\":\"配置支付宝接口\",\"link\":\"/src/前端/other-note/配置支付宝接口\"},{\"text\":\"面试复习\",\"link\":\"/src/前端/other-note/面试复习\"}]},\"/src/前端/react-native\":{\"text\":\"react-native\",\"items\":[{\"text\":\"rn-01 react-native\",\"link\":\"/src/前端/react-native/rn-01 react-native\"}]},\"/src/前端/\":[{\"text\":\"Electron\",\"collapsed\":false,\"items\":[{\"text\":\"Electron-01 electron概念、搭建⼀个⼯程\",\"link\":\"/src/前端/Electron/Electron-01 electron概念、搭建⼀个⼯程\"},{\"text\":\"Electron-02 进程通讯\",\"link\":\"/src/前端/Electron/Electron-02 进程通讯\"}],\"collapsible\":true},{\"text\":\"Javascript\",\"collapsed\":false,\"items\":[{\"text\":\"js-01 javascript 初始\",\"link\":\"/src/前端/Javascript/js-01 javascript 初始\"},{\"text\":\"js-02 javascript数据类型篇\",\"link\":\"/src/前端/Javascript/js-02 javascript数据类型篇\"},{\"text\":\"js-03 条件、循环、语句\",\"link\":\"/src/前端/Javascript/js-03 条件、循环、语句\"},{\"text\":\"js-04 自定义属性\",\"link\":\"/src/前端/Javascript/js-04 自定义属性\"},{\"text\":\"js-05 函数\",\"link\":\"/src/前端/Javascript/js-05 函数\"},{\"text\":\"js-06 定时器、时间、Math\",\"link\":\"/src/前端/Javascript/js-06 定时器、时间、Math\"},{\"text\":\"js-07 字符串、对象\",\"link\":\"/src/前端/Javascript/js-07 字符串、对象\"},{\"text\":\"js-08 数组\",\"link\":\"/src/前端/Javascript/js-08 数组\"},{\"text\":\"js-09 DOM\",\"link\":\"/src/前端/Javascript/js-09 DOM\"},{\"text\":\"js-10 BOM\",\"link\":\"/src/前端/Javascript/js-10 BOM\"},{\"text\":\"js-11 事件对象\",\"link\":\"/src/前端/Javascript/js-11 事件对象\"},{\"text\":\"js-12 拖拽、缓冲、懒加载\",\"link\":\"/src/前端/Javascript/js-12 拖拽、缓冲、懒加载\"},{\"text\":\"js-13 cookie\",\"link\":\"/src/前端/Javascript/js-13 cookie\"},{\"text\":\"js-14 正则篇\",\"link\":\"/src/前端/Javascript/js-14 正则篇\"},{\"text\":\"js-15 面向对象、继承\",\"link\":\"/src/前端/Javascript/js-15 面向对象、继承\"},{\"text\":\"js-16 闭包、高阶函数、ajax\",\"link\":\"/src/前端/Javascript/js-16 闭包、高阶函数、ajax\"},{\"text\":\"js-17 拖拽API、文件上传、下载\",\"link\":\"/src/前端/Javascript/js-17 拖拽API、文件上传、下载\"},{\"text\":\"js-18 其他API\",\"link\":\"/src/前端/Javascript/js-18 其他API\"},{\"text\":\"js-19 ajax、接口请求 跨域\",\"link\":\"/src/前端/Javascript/js-19 ajax、接口请求 跨域\"},{\"text\":\"js小方法\",\"link\":\"/src/前端/Javascript/js小方法\"},{\"text\":\"js插件推荐\",\"link\":\"/src/前端/Javascript/js插件推荐\"},{\"text\":\"js数据结构\",\"link\":\"/src/前端/Javascript/js数据结构\"},{\"text\":\"js源码实现\",\"link\":\"/src/前端/Javascript/js源码实现\"},{\"text\":\"js理论面试题\",\"link\":\"/src/前端/Javascript/js理论面试题\"},{\"text\":\"js算法\",\"link\":\"/src/前端/Javascript/js算法\"},{\"text\":\"js类型整合（助记）\",\"link\":\"/src/前端/Javascript/js类型整合（助记）\"},{\"text\":\"js设计模式\",\"link\":\"/src/前端/Javascript/js设计模式\"},{\"text\":\"js面试问题\",\"link\":\"/src/前端/Javascript/js面试问题\"},{\"text\":\"lodash常用方法\",\"link\":\"/src/前端/Javascript/lodash常用方法\"}],\"collapsible\":true},{\"text\":\"Nextjs\",\"collapsed\":false,\"items\":[{\"text\":\"Next-01 服务端组件、客户端组件、不同类型组件交叉使用的注意点、缓存\",\"link\":\"/src/前端/Nextjs/Next-01 服务端组件、客户端组件、不同类型组件交叉使用的注意点、缓存\"},{\"text\":\"Next-02 路由处理程序、ServerAction\",\"link\":\"/src/前端/Nextjs/Next-02 路由处理程序、ServerAction\"}],\"collapsible\":true},{\"text\":\"React\",\"collapsed\":false,\"items\":[{\"text\":\"Reach__router\",\"link\":\"/src/前端/React/Reach__router\"},{\"text\":\"React写测试\",\"link\":\"/src/前端/React/React写测试\"},{\"text\":\"React搭建项目\",\"link\":\"/src/前端/React/React搭建项目\"},{\"text\":\"React面试\",\"link\":\"/src/前端/React/React面试\"},{\"text\":\"hooks实现原理\",\"link\":\"/src/前端/React/hooks实现原理\"},{\"text\":\"react-01 初识\",\"link\":\"/src/前端/React/react-01 初识\"},{\"text\":\"react-02 脚手架、JSX\",\"link\":\"/src/前端/React/react-02 脚手架、JSX\"},{\"text\":\"react-03 组件通讯、生命周期\",\"link\":\"/src/前端/React/react-03 组件通讯、生命周期\"},{\"text\":\"react-04 路由\",\"link\":\"/src/前端/React/react-04 路由\"},{\"text\":\"react-05 其他Api\",\"link\":\"/src/前端/React/react-05 其他Api\"},{\"text\":\"react-06 Redux\",\"link\":\"/src/前端/React/react-06 Redux\"},{\"text\":\"react-07 hooks\",\"link\":\"/src/前端/React/react-07 hooks\"},{\"text\":\"react-08 高阶组件\",\"link\":\"/src/前端/React/react-08 高阶组件\"},{\"text\":\"react-09 项目优化、项目坑\",\"link\":\"/src/前端/React/react-09 项目优化、项目坑\"},{\"text\":\"react-10 服务端渲染\",\"link\":\"/src/前端/React/react-10 服务端渲染\"},{\"text\":\"react常用插件\",\"link\":\"/src/前端/React/react常用插件\"},{\"text\":\"常用自定义hooks\",\"link\":\"/src/前端/React/常用自定义hooks\"}],\"collapsible\":true},{\"text\":\"Server\",\"collapsed\":false,\"items\":[{\"text\":\"linux-01 系统知识\",\"link\":\"/src/前端/Server/linux-01 系统知识\"},{\"text\":\"linux-02 基本操作\",\"link\":\"/src/前端/Server/linux-02 基本操作\"},{\"text\":\"linux-03 文件操作\",\"link\":\"/src/前端/Server/linux-03 文件操作\"},{\"text\":\"linux-04 vim编辑器\",\"link\":\"/src/前端/Server/linux-04 vim编辑器\"},{\"text\":\"linux-05 基本管理\",\"link\":\"/src/前端/Server/linux-05 基本管理\"},{\"text\":\"linux-06 shell基础\",\"link\":\"/src/前端/Server/linux-06 shell基础\"},{\"text\":\"linux-07 shell语句\",\"link\":\"/src/前端/Server/linux-07 shell语句\"},{\"text\":\"linux常用\",\"link\":\"/src/前端/Server/linux常用\"},{\"text\":\"nginx配置\",\"link\":\"/src/前端/Server/nginx配置\"},{\"text\":\"ubuntu教程\",\"link\":\"/src/前端/Server/ubuntu教程\"},{\"text\":\"宝塔面板搭建服务器\",\"link\":\"/src/前端/Server/宝塔面板搭建服务器\"}],\"collapsible\":true},{\"text\":\"Typescript\",\"collapsed\":false,\"items\":[{\"text\":\"ts-01 基础类型\",\"link\":\"/src/前端/Typescript/ts-01 基础类型\"},{\"text\":\"ts-02 接口、函数\",\"link\":\"/src/前端/Typescript/ts-02 接口、函数\"},{\"text\":\"ts-03 泛型、类\",\"link\":\"/src/前端/Typescript/ts-03 泛型、类\"},{\"text\":\"ts-04 枚举、类型推论\",\"link\":\"/src/前端/Typescript/ts-04 枚举、类型推论\"},{\"text\":\"ts-05 高级类型\",\"link\":\"/src/前端/Typescript/ts-05 高级类型\"},{\"text\":\"ts-06 命名空间、声明合并\",\"link\":\"/src/前端/Typescript/ts-06 命名空间、声明合并\"},{\"text\":\"ts-07 装饰器、Mixins\",\"link\":\"/src/前端/Typescript/ts-07 装饰器、Mixins\"},{\"text\":\"ts-08 声明文件、模块解析\",\"link\":\"/src/前端/Typescript/ts-08 声明文件、模块解析\"},{\"text\":\"ts-09 其他\",\"link\":\"/src/前端/Typescript/ts-09 其他\"},{\"text\":\"ts-类型收集\",\"link\":\"/src/前端/Typescript/ts-类型收集\"},{\"text\":\"tsconfig\",\"link\":\"/src/前端/Typescript/tsconfig\"},{\"text\":\"ts实战例子\",\"link\":\"/src/前端/Typescript/ts实战例子\"},{\"text\":\"ts开发环境搭建\",\"link\":\"/src/前端/Typescript/ts开发环境搭建\"},{\"text\":\"typescript_react\",\"link\":\"/src/前端/Typescript/typescript_react\"},{\"text\":\"typescript_vue\",\"link\":\"/src/前端/Typescript/typescript_vue\"},{\"text\":\"总结Typescript\",\"link\":\"/src/前端/Typescript/总结Typescript\"}],\"collapsible\":true},{\"text\":\"Vue\",\"collapsed\":false,\"items\":[{\"text\":\"Vue3-API\",\"link\":\"/src/前端/Vue/Vue3-API\"},{\"text\":\"Vue3-Vue2不同点\",\"link\":\"/src/前端/Vue/Vue3-Vue2不同点\"},{\"text\":\"Vue3造轮子常用\",\"link\":\"/src/前端/Vue/Vue3造轮子常用\"},{\"text\":\"vue-01 初识vue\",\"link\":\"/src/前端/Vue/vue-01 初识vue\"},{\"text\":\"vue-02 修饰符 表单\",\"link\":\"/src/前端/Vue/vue-02 修饰符 表单\"},{\"text\":\"vue-03 组件 Prop\",\"link\":\"/src/前端/Vue/vue-03 组件 Prop\"},{\"text\":\"vue-04 组件通讯 插槽\",\"link\":\"/src/前端/Vue/vue-04 组件通讯 插槽\"},{\"text\":\"vue-05 过渡 生命周期\",\"link\":\"/src/前端/Vue/vue-05 过渡 生命周期\"},{\"text\":\"vue-06 Router\",\"link\":\"/src/前端/Vue/vue-06 Router\"},{\"text\":\"vue-07 Vuex\",\"link\":\"/src/前端/Vue/vue-07 Vuex\"},{\"text\":\"vue-08 插件开发\",\"link\":\"/src/前端/Vue/vue-08 插件开发\"},{\"text\":\"vue实战技巧\",\"link\":\"/src/前端/Vue/vue实战技巧\"},{\"text\":\"vue造轮子常用方法\",\"link\":\"/src/前端/Vue/vue造轮子常用方法\"},{\"text\":\"vue面试题\",\"link\":\"/src/前端/Vue/vue面试题\"},{\"text\":\"vue项目bug记录\",\"link\":\"/src/前端/Vue/vue项目bug记录\"}],\"collapsible\":true},{\"text\":\"Webpack\",\"collapsed\":false,\"items\":[{\"text\":\"webpack-01 服务、配置项\",\"link\":\"/src/前端/Webpack/webpack-01 服务、配置项\"},{\"text\":\"webpack-02 处理js、暴露全局变量\",\"link\":\"/src/前端/Webpack/webpack-02 处理js、暴露全局变量\"},{\"text\":\"webpack-03 多页面、source-map、实时打包\",\"link\":\"/src/前端/Webpack/webpack-03 多页面、source-map、实时打包\"},{\"text\":\"webpack-04  优化、动态链接库、多线程打包\",\"link\":\"/src/前端/Webpack/webpack-04  优化、动态链接库、多线程打包\"},{\"text\":\"webpack-05 抽离公共模块、懒加载\",\"link\":\"/src/前端/Webpack/webpack-05 抽离公共模块、懒加载\"},{\"text\":\"webpack原理\",\"link\":\"/src/前端/Webpack/webpack原理\"},{\"text\":\"webpack插件\",\"link\":\"/src/前端/Webpack/webpack插件\"}],\"collapsible\":true},{\"text\":\"es6\",\"collapsed\":false,\"items\":[{\"text\":\"es6-01 let、解构、模板、箭头\",\"link\":\"/src/前端/es6/es6-01 let、解构、模板、箭头\"},{\"text\":\"es6-02 扩展、Symbol、iterator\",\"link\":\"/src/前端/es6/es6-02 扩展、Symbol、iterator\"},{\"text\":\"es6-03 类、set、map\",\"link\":\"/src/前端/es6/es6-03 类、set、map\"},{\"text\":\"es6-04 Promise、async\",\"link\":\"/src/前端/es6/es6-04 Promise、async\"},{\"text\":\"es6-05 扩展\",\"link\":\"/src/前端/es6/es6-05 扩展\"},{\"text\":\"es6-06 module\",\"link\":\"/src/前端/es6/es6-06 module\"},{\"text\":\"es6-07 proxy、Reflect\",\"link\":\"/src/前端/es6/es6-07 proxy、Reflect\"},{\"text\":\"es6-08 新提案\",\"link\":\"/src/前端/es6/es6-08 新提案\"},{\"text\":\"es6原理实现\",\"link\":\"/src/前端/es6/es6原理实现\"}],\"collapsible\":true},{\"text\":\"html5\",\"collapsed\":false,\"items\":[{\"text\":\"CSS 预编译器\",\"link\":\"/src/前端/html5/CSS 预编译器\"},{\"text\":\"CSS常用布局\",\"link\":\"/src/前端/html5/CSS常用布局\"},{\"text\":\"css小方法\",\"link\":\"/src/前端/html5/css小方法\"},{\"text\":\"css常见bug\",\"link\":\"/src/前端/html5/css常见bug\"},{\"text\":\"html-01 基础知识\",\"link\":\"/src/前端/html5/html-01 基础知识\"},{\"text\":\"html-02 a标签，表格，表单\",\"link\":\"/src/前端/html5/html-02 a标签，表格，表单\"},{\"text\":\"html-03 CSS样式字体\",\"link\":\"/src/前端/html5/html-03 CSS样式字体\"},{\"text\":\"html-04 盒子模型 背景\",\"link\":\"/src/前端/html5/html-04 盒子模型 背景\"},{\"text\":\"html-05 元素转换、浮动\",\"link\":\"/src/前端/html5/html-05 元素转换、浮动\"},{\"text\":\"html-06 定位 BFC\",\"link\":\"/src/前端/html5/html-06 定位 BFC\"},{\"text\":\"html-07 布局方式 IE\",\"link\":\"/src/前端/html5/html-07 布局方式 IE\"},{\"text\":\"html-08 雪碧图\",\"link\":\"/src/前端/html5/html-08 雪碧图\"},{\"text\":\"html-11 Svg简介\",\"link\":\"/src/前端/html5/html-11 Svg简介\"},{\"text\":\"html-12 HTML5\",\"link\":\"/src/前端/html5/html-12 HTML5\"},{\"text\":\"html-13 CSS3选择器\",\"link\":\"/src/前端/html5/html-13 CSS3选择器\"},{\"text\":\"html-14 flex、grid、table\",\"link\":\"/src/前端/html5/html-14 flex、grid、table\"},{\"text\":\"html-15 LESS css预处理器\",\"link\":\"/src/前端/html5/html-15 LESS css预处理器\"},{\"text\":\"html-17 移动端布局\",\"link\":\"/src/前端/html5/html-17 移动端布局\"},{\"text\":\"html-18 2D、3D动画\",\"link\":\"/src/前端/html5/html-18 2D、3D动画\"},{\"text\":\"html-19 filter\",\"link\":\"/src/前端/html5/html-19 filter\"},{\"text\":\"html面试问题\",\"link\":\"/src/前端/html5/html面试问题\"},{\"text\":\"reset.css\",\"link\":\"/src/前端/html5/reset.css\"},{\"text\":\"容易忘记的知识\",\"link\":\"/src/前端/html5/容易忘记的知识\"},{\"text\":\"提高css开发效率\",\"link\":\"/src/前端/html5/提高css开发效率\"}],\"collapsible\":true},{\"text\":\"jQuery\",\"collapsed\":false,\"items\":[{\"text\":\"jq-01 什么是jQuery\",\"link\":\"/src/前端/jQuery/jq-01 什么是jQuery\"},{\"text\":\"jq-02 选择器\",\"link\":\"/src/前端/jQuery/jq-02 选择器\"},{\"text\":\"jq-03 属性、位置\",\"link\":\"/src/前端/jQuery/jq-03 属性、位置\"},{\"text\":\"jq-04 事件和动画\",\"link\":\"/src/前端/jQuery/jq-04 事件和动画\"},{\"text\":\"jq-05 ajax 自定义jquery插件\",\"link\":\"/src/前端/jQuery/jq-05 ajax 自定义jquery插件\"}],\"collapsible\":true},{\"text\":\"mini-programe\",\"collapsed\":false,\"items\":[{\"text\":\"小程序-01 小程序入门\",\"link\":\"/src/前端/mini-programe/小程序-01 小程序入门\"},{\"text\":\"小程序-02 模板、组件\",\"link\":\"/src/前端/mini-programe/小程序-02 模板、组件\"},{\"text\":\"小程序-03  媒体组件\",\"link\":\"/src/前端/mini-programe/小程序-03  媒体组件\"},{\"text\":\"小程序-04  API\",\"link\":\"/src/前端/mini-programe/小程序-04  API\"},{\"text\":\"小程序-05 路由封装\",\"link\":\"/src/前端/mini-programe/小程序-05 路由封装\"},{\"text\":\"小程序-07 mpvue\",\"link\":\"/src/前端/mini-programe/小程序-07 mpvue\"}],\"collapsible\":true},{\"text\":\"node\",\"collapsed\":false,\"items\":[{\"text\":\"HTTP状态码\",\"link\":\"/src/前端/node/HTTP状态码\"},{\"text\":\"index的副本.assets\",\"collapsed\":false,\"items\":[],\"collapsible\":true},{\"text\":\"node-01 http nodejs\",\"link\":\"/src/前端/node/node-01 http nodejs\"},{\"text\":\"node-02 路由、path、模块\",\"link\":\"/src/前端/node/node-02 路由、path、模块\"},{\"text\":\"node-03 fs文件\",\"link\":\"/src/前端/node/node-03 fs文件\"},{\"text\":\"node-04 express 跨域\",\"link\":\"/src/前端/node/node-04 express 跨域\"},{\"text\":\"node-05 RESTful、爬虫\",\"link\":\"/src/前端/node/node-05 RESTful、爬虫\"},{\"text\":\"node-06 加密 cookie ejs\",\"link\":\"/src/前端/node/node-06 加密 cookie ejs\"},{\"text\":\"node-07 模板化\",\"link\":\"/src/前端/node/node-07 模板化\"},{\"text\":\"node-08 mongodb\",\"link\":\"/src/前端/node/node-08 mongodb\"},{\"text\":\"node-09 mongoose\",\"link\":\"/src/前端/node/node-09 mongoose\"},{\"text\":\"node-10 websocket\",\"link\":\"/src/前端/node/node-10 websocket\"},{\"text\":\"node使用babel\",\"link\":\"/src/前端/node/node使用babel\"},{\"text\":\"node常用指令\",\"link\":\"/src/前端/node/node常用指令\"},{\"text\":\"node插件分享\",\"link\":\"/src/前端/node/node插件分享\"},{\"text\":\"node项目实例\",\"link\":\"/src/前端/node/node项目实例\"},{\"text\":\"node项目小技巧\",\"link\":\"/src/前端/node/node项目小技巧\"}],\"collapsible\":true},{\"text\":\"other-note\",\"collapsed\":false,\"items\":[{\"text\":\"AST抽象语法树\",\"link\":\"/src/前端/other-note/AST抽象语法树\"},{\"text\":\"Immutable\",\"link\":\"/src/前端/other-note/Immutable\"},{\"text\":\"Mac使用技巧\",\"link\":\"/src/前端/other-note/Mac使用技巧\"},{\"text\":\"Markdown语法\",\"link\":\"/src/前端/other-note/Markdown语法\"},{\"text\":\"Typora设置\",\"link\":\"/src/前端/other-note/Typora设置\"},{\"text\":\"VS code 使用技巧\",\"link\":\"/src/前端/other-note/VS code 使用技巧\"},{\"text\":\"VuePress搭建个人博客\",\"link\":\"/src/前端/other-note/VuePress搭建个人博客\"},{\"text\":\"animate.css使用方法\",\"link\":\"/src/前端/other-note/animate.css使用方法\"},{\"text\":\"bootstrap 全局css样式\",\"link\":\"/src/前端/other-note/bootstrap 全局css样式\"},{\"text\":\"canvas\",\"link\":\"/src/前端/other-note/canvas\"},{\"text\":\"git\",\"link\":\"/src/前端/other-note/git\"},{\"text\":\"hexo搭建个人博客\",\"link\":\"/src/前端/other-note/hexo搭建个人博客\"},{\"text\":\"mobx\",\"link\":\"/src/前端/other-note/mobx\"},{\"text\":\"七牛云cdn加速图片\",\"link\":\"/src/前端/other-note/七牛云cdn加速图片\"},{\"text\":\"包管理工具\",\"link\":\"/src/前端/other-note/包管理工具\"},{\"text\":\"团队协作工具\",\"link\":\"/src/前端/other-note/团队协作工具\"},{\"text\":\"微信分享\",\"link\":\"/src/前端/other-note/微信分享\"},{\"text\":\"未学知识\",\"link\":\"/src/前端/other-note/未学知识\"},{\"text\":\"浏览器技巧\",\"link\":\"/src/前端/other-note/浏览器技巧\"},{\"text\":\"百度地图API\",\"link\":\"/src/前端/other-note/百度地图API\"},{\"text\":\"配置支付宝接口\",\"link\":\"/src/前端/other-note/配置支付宝接口\"},{\"text\":\"面试复习\",\"link\":\"/src/前端/other-note/面试复习\"}],\"collapsible\":true},{\"text\":\"react-native\",\"collapsed\":false,\"items\":[{\"text\":\"rn-01 react-native\",\"link\":\"/src/前端/react-native/rn-01 react-native\"}],\"collapsible\":true}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://gitee.com/lwj-wing\"}],\"algolia\":{\"appId\":\"HB9RH9MVTU\",\"apiKey\":\"a1ecd3b81f0afbd82c111a8548a67c06\",\"indexName\":\"Github\"},\"editLink\":{\"pattern\":\"https://gitee.com/lwj-wing/vite-note/edit/master/:path\",\"text\":\"在Gitee上编辑此页 \"},\"lastUpdated\":{\"text\":\"最后编辑时间\",\"formatOptions\":{\"dateStyle\":\"full\",\"timeStyle\":\"medium\"}},\"docFooter\":{\"prev\":\"上一篇\",\"next\":\"下一篇\"}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
    
  </body>
</html>